﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>

    </title>
    <link href="Styles.css" rel="stylesheet" />
</head>
<body>
    <form method="get" name="doFloor">
        
        <select name="numRows" id="numRows">
            <option value="">Vælg rows</option>
        </select>
        <select name="numSeatsPerRow" id="numSeatsPerRow">
            <option value="">Vælg SPR</option>
        </select>
        
        <input type="button" name="btnSubmit" id="btnSubmit" value="Prøv" />

    </form>
    <div id="floor" class="Floor">
        <!--<div id="r1" class="Row">
            <!-- CSS:
                SeatAvailable -> siger sig selv
                SeatDisabled -> siger sig selv
                --
            <div class="SeatBox">
                <div id="s1" class="Seat SeatAvailable"></div>
            </div>
            <div class="SeatBox">
                <div id="s2" class="Seat SeatAvailable"></div>
            </div>
        </div>-->
    </div>
    
    

    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
        selectValues = {
            "1": "1",
            "2": "2",
            "3": "3",
            "4": "4",
            "5": "5",
            "6": "6",
            "7": "7",
            "8": "8",
            "9": "9",
            "10": "10",
            "11": "11",
            "12": "12",
            "13": "13",
            "14": "14"
            
        };

        $.each(selectValues, function (key, value) {
            $('#numRows')
                 .append($('<option>', { value: key })
                 .text(value));
        });

        $.each(selectValues, function (key, value) {
            $('#numSeatsPerRow')
                 .append($('<option>', { value: key })
                 .text(value));
        });

        $("#btnSubmit").click(function () {
            createFloorImage();
        });

        function createFloorImage() {
            var $theFloor = $('#floor');

            $theFloor.html('');

            var rows = $('#numRows option:selected').text();
            var spr = $('#numSeatsPerRow option:selected').text();
            var $safeRow = $('<div class="Row"></div>');
            var $row = $('<div class="Row"></div>');

            var $safeSeat = $('<div class="Seat"></div>');
            var $seat = $('<div class="Seat"></div>');

            for (var iRow = 0; iRow < rows; iRow++) {
                // lav en div
                // <div id="r1" class="Row">

                $row.attr("id", "r" + iRow);
                $row.attr("style", "border:1px solid #CC0000;");

                for (var iSeat = 0; iSeat < spr; iSeat++) {
                    // udskriv div
                    // <div id="s1" class="Seat SeatAvailable"></div>

                    $seat.attr("id", "r" + iRow + "s" + iSeat);
                    $seat.addClass("SeatAvailable");

                    $("#r" + iRow).append($seat);

                    $seat = $safeSeat;

                }

                $theFloor.append($row);

                $row = $safeRow;

                // slut denne div
                // </div>
            }
        }
    </script>
</body>
</html>